<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="/css/element.css" />
</head>

<body>
    <script src="/js/Vue.js"></script>
    <script src="/js/element.js"></script>
    <script src="/js/axios.js"></script>
    <script src="/js/Qs.js"></script>
    <script type="text/javascript" src="/js/layer.js"></script>
<div class="layui-fluid">
    <table id="commTab" lay-filter="commFilter"></table>
</div>

<!--编辑对话框-->
<form class="layui-form" style="display: none;margin-top:20px" id="editDialog" lay-filter="editDialog">
    <div class="layui-form-item">
        <label for="cid" class="layui-form-label">职务</label>
        <div class="layui-input-inline">
            <input type="text" name="cid" id="cid" value="10" style="border: 0" class="layui-input" readonly>
        </div>
    </div>

    <div class="layui-form-item">
        <label for="cname" class="layui-form-label">姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="cname" id="cname" class="layui-input">
        </div>
    </div>
</form>
<script src="../../../js/layer.js"></script>
<!--自定义模板(表格头部工具栏)-->
<script type="text/html" id="headTools">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal" lay-event="add">
            <span class="layui-icon layui-icon-add-circle"></span>
            添加
        </button>
        <button class="layui-btn layui-btn-danger" lay-event="delAll">
            <span class="layui-icon layui-icon-delete"></span>
            批量删除
        </button>
    </div>
</script>
<!--自定义模板（表格行的工具栏）-->
<script type="text/html" id="itemTools">
    <div class="layui-btn-container">
        <a class="layui-btn layui-btn-warm layui-btn-sm" href="javascript:;" lay-event="edit">
            <span class="layui-icon layui-icon-edit"></span>编辑
        </a>
        <a class="layui-btn layui-btn-danger layui-btn-sm" href="javascript:;" lay-event="del">
            <span class="layui-icon layui-icon-delete"></span>删除
        </a>
    </div>
</script>

<!--自定义模板（处理空列信息）-->
<script type="text/html" id="bakTpl">
    {{# if(d.bak == null){ }}
    无
    {{# }else{ }}
    {{d.bak}}
    {{# } }}
</script>

<script>
    var param = {};
    layui.use(['element', 'table', 'layer', 'jquery', 'laytpl', 'form', 'util', 'upload'], function () {
        var ele = layui.element;
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        var $ = layui.jquery;
        var laytpl = layui.util;
        var util = layui.util;
        var upload = layui.upload;


        //表格模块渲染数据
        table.render({
            elem: '#commTab', //需要展示数据的表格id
            url: '/data/add_job', //服务端数据地址
            cols: [[     //数据项
                {type: 'checkbox', fixed: 'left', width: 80},
                {type: 'numbers', title: '序号', width: 80},
                {field: 'cid', title: '职务', width: 80, sort: true},
                {field: 'cname', title: '姓名'},
                {title: '操作', fixed: 'right', width: 300, toolbar: '#itemTools', align: 'center'}
            ]],
            page: true,   //显示分页效果
            limit: 5,    //设置默认的每页大小数
            limits: [3, 5, 10, 15, 20],  //设置每页条数的限制数
            toolbar: true,   //开启表格头部工具条
            defaultToolbar: ['exports', 'filter', 'print'],  //设置工具条默认的按钮（筛选，打印，导出）
            toolbar: '#headTools'
        });
        //监听表格头工具栏事件
        table.on('toolbar(commFilter)', function (obj) {
            // console.log(obj)
            switch (obj.event) {
                case 'add':
                   layer.open({
                    type: 2,
                    title: '添加',
                    shadeClose: true,
                    shade: false,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['400px', '400px'],
                    content: '/dialog/system/addJob.html',
                    btn: ['添加', '取消'], // 按钮设置
                    btnAlign: 'c',    //按钮显示位置
                    yes:function (index,layero) {    //确定按钮回调
                        //确定回调
                        layer.close(index);
                        //显示loading动画
                        index = layer.load(1,{
                            shade:[0.1,'#fff']
                        })
                        
                        console.log(param,'');
                        $.post('/data/add_job',param,function (resp) { 
                            //关闭加载动画
                            // layer.close(index);
                            if(resp.success){
                             layer.msg("添加成功");
                            }                            
                        })
                    }
                   })
                    break;
                case 'delAll':
                    //获取所有的选中项
                    var cks = table.checkStatus(obj.config.id);
                    console.log(cks);
                    if (cks.data.length == 0) {
                        layer.msg('请选择需要删除的职务');
                        return;
                    }
                    layer.confirm(`是否确认删除这${cks.data.length}项?`, {icon: 3}, function (index) {
                        var index2 = layer.load(1, {
                            shade: [0.1, '#fff'] //0.1透明度的白色背景
                        });
                        //关闭指定索引的弹框
                        layer.close(index);
                        //请求服务器，实现批量删除功能
                        var datas = cks.data;
                        //声明数组用于存储所有需要被删除的id项
                        var ids = new Array();
                        //遍历所有需要被删除的元素，并获取其dno属性值存储到数组中
                        $.each(datas, function (i, e) {
                            ids.push(e.uid);
                        })
                        //将数组中所有元素使用“,”分隔符拼接为字符串 [10,20,30,40]=>"10,20,30,40"
                        ids = ids.join(',');
                        //dept?method=delAll&ids=10,20,30,40
                        $.get(`/data/add_job`, function (resp) {
                            //关闭环形进度
                            layer.close(index2);
                            if (resp.code == 0) {
                                layer.msg('删除成功', function () {
                                    //页面刷新
                                    location.reload();
                                })
                            } else {
                                layer.alert(resp.msg);
                            }
                        })
                    })
                    break;
            }
        })
        //监听表格行工具栏事件
        table.on('tool(commFilter)', function (obj) {
            if (obj.event === 'details') {
                layer.msg(JSON.stringify(obj.data));
            } else if (obj.event === 'edit') {
                edit(obj);
            } else if (obj.event === 'del') {
                del(obj);
            }
        })

        //删除功能
        function del(obj) {
            layer.confirm('是否确定删除当前行?', {icon: 3}, function (index) {
                //删除当前行dom节点（不是物理删除）
                obj.del();
                //关闭指定索引的弹出层
                layer.close(index);
                //请求服务器完成删除
                $.get(`/data/add_job`, function (resp) {
                    console.log(resp);
                    if (resp.code == 0) {
                        layer.msg('删除成功');
                    } else {
                        layer.alert(resp.msg, {icon: 2});
                    }
                })
            })
        }

        //编辑功能
        function edit(obj) {
            layer.open({
                type: 1,
                title: '修改',
                content: $('#editDialog'),   //需要显示的内容（String,DOM,Array）
                area: '380px',       // 设置弹出层宽度，高度自适应，如果需要同时指定宽高 area:['400px','400px']
                btn: ['修改', '取消'], // 按钮设置
                btnAlign: 'c',    //按钮显示位置
                success: function (layero, index) { //弹出层显示成功后回调
                    //将当前行数据填写到弹出表单中
                    var data = obj.data;
                    //重置表单（避免缓存上一次编辑的数据）
                    $('#editDialog')[0].reset();
                    //数据回显
                    form.val('editDialog', data);
                    $('#bir').val(layui.util.toDateString(data.bir, "yyyy-MM-dd"));
                },
                yes: function (index, layero) { //确定按钮回调
                    layer.close(index);
                    //显示loding动画
                    index = layer.load(1, {
                        shade: [0.1, '#fff'] //0.1透明度的白色背景
                    });
                    //发送ajax请求
                    $.post('/data/add_job', function (resp) {
                        //关闭加载动画
                        layer.close(index);
                        //显示消息提示
                        layer.msg(resp.msg, function () {
                            if (resp.code == 0) {
                                //更新当前行数据
                                obj.update(resp.data);
                            }
                        })
                    })
                }
            })
        }

    })
</script>
</body>
</html>